<template>
  <!-- <div>客户信息</div> -->
  <div class="layout">
    <div class="left">
      <div class="top">
        <p>客户信息</p>
        <div class="customerItems">
          <div class="item" v-for="(item, index) in customerInforList" :key="index">
            <strong>{{ item.key }}</strong>
            <template v-if="item.key === '客户级别' || item.key === '人脸识别'">
              <el-tag v-if="item.key === '客户级别'" type="primary" effect="plain">
                {{ item.value }}
              </el-tag>

              <el-text v-if="item.key === '人脸识别'" class="mx-1" type="success">
                {{ item.value }}
              </el-text>
            </template>

            <span v-else>{{ item.value }}</span>
          </div>
        </div>
      </div>
      <div class="bottom">
        <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs">
          <el-tab-pane
            v-for="item in editableTabs"
            :key="item.name"
            :label="item.title"
            :name="item.name"
          >
            <!-- 数据展示 -->
            <el-table
              :data="item.content"
              border
              style="width: 100%; height: 500px; overflow-y: auto"
            >
              <el-table-column prop="type" label="账号类型" width="180" />
              <el-table-column prop="cardNo" label="客户账号" width="180" />
              <el-table-column prop="cardLimit" label="每日限额" />
              <el-table-column prop="cardName" label="账户开户机构" />
              <el-table-column prop="cardBalance" label="可用余额" />
              <el-table-column prop="cardStatus" label="账户状态" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <div class="right">
      <div class="littlebox"></div>
      <div class="box">
        <div class="box1" @click="handleClick('microphone')"></div>
        <div class="box2" @click="handleClick('phone')"></div>
        <div class="box3" @click="handleClick('camera')"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

let tabIndex = 2
const editableTabsValue = ref('2')
const editableTabs = ref([
  {
    title: '借记卡账号列表',
    name: '1',
    content: [
      {
        type: '借记卡',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      }
    ]
  },
  {
    title: '信用卡账号列表 ',
    name: '2',
    content: [
      {
        type: '借记卡1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户11',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: '借记卡1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户11',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: '借记卡1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户11',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: '借记卡1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户1',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户11',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      },
      {
        type: 'e电子账户',
        cardNo: '6222020200020200',
        cardType: '个人卡',
        cardName: '中国银行',
        cardStatus: '正常',
        cardBalance: '10000.00',
        cardLimit: '50000.00'
      }
    ]
  }
])

const customerInforList = ref([
  { key: '客户账号', value: '013005872426' },
  { key: '姓名', value: '周小艺' },
  { key: '性别', value: '女' },
  { key: '手机号码', value: '13587829909' },
  { key: '证件类型', value: '身份证' },
  { key: '证件号码', value: '440113198907180037' },
  { key: '出生日期', value: '1998-07-18' },
  { key: '人脸识别', value: '通过' },
  { key: '风险等级', value: '进取型' },
  { key: '风险有效期', value: '2022-02-08' },
  { key: '客户级别', value: '高级会员' },
  { key: '联网检查', value: '身份证号码与姓名一致' }
])

// 视频通话点击事件
const handleClick = (val) => {
  if (val === 'microphone') {
    const box1 = document.getElementsByClassName('box1')
    box1[0].style.backgroundColor = '#8b8b8b'
    console.log(box1)
  } else if (val === 'camera') {
    const box3 = document.getElementsByClassName('box3')
    box3[0].style.backgroundColor = '#8b8b8b'
  } else if (val === 'phone') {
    const box2 = document.getElementsByClassName('box2')
    console.log(box2)
  }
}
</script>

<style lang="scss" scoped>
.layout {
  display: flex;
  justify-content: space-between;

  .left {
    margin-right: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .top {
      padding: 20px 20px;
      margin-bottom: 16px;
      height: 368px;
      background: #fff;

      p {
        margin-bottom: 16px;
        font-size: 18px;
        font-weight: normal;
        line-height: 24px;
        display: flex;
        align-items: center;
        letter-spacing: 0px;
        color: #000000;
      }

      .customerItems {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;

        .item {
          padding: 0 16px;
          display: flex;
          width: 50%;
          height: 48px;

          strong {
            width: 88px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #f5f7fa;
            border: 1px solid #dcdfe6;
            // box-shadow: inset -1px -1px 0px 0px #dcdfe6;
          }

          span {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 12px 16px;
            font-family: HarmonyOS Sans SC;
            font-size: 14px;
            line-height: 24px;
            text-align: right;
            color: #606266;
            background: #ffffff;
            // box-shadow: inset -1px -1px 0px 0px #dcdfe6;
            border: 1px solid #dcdfe6;
          }
        }
      }
    }
    .bottom {
      flex: 1;
      background: #fff;
    }
  }
  .right {
    position: relative;
    width: 596px;
    height: 968px;
    background: url('@/assets/images/customer/大画面@2x.png') no-repeat;
    background-size: cover;

    .littlebox {
      position: absolute;
      top: 23px;
      right: 23px;
      width: 200px;
      height: 291px;
      background: url('@/assets/images/customer/小画面@2x.png') no-repeat;
      background-size: cover;
    }

    .box {
      position: absolute;
      left: 0;
      bottom: 70px;
      display: flex;
      align-items: center;
      justify-content: space-evenly;

      width: 100%;
      height: 84px;

      .box1,
      .box3 {
        width: 79.64px;
        height: 83.21px;
        opacity: 0.8;
        border-radius: 100%;
        background: rgba(175, 175, 175, 0.41);
        backdrop-filter: blur(20px);
      }

      .box1 {
        background: url('@/assets/images/customer/麦克风.png') no-repeat center center;
        background-size: 50%;
      }

      .box3 {
        background: url('@/assets/images/customer/摄像头.png') no-repeat center center;
        background-size: 50%;
      }

      .box2 {
        width: 110px;
        height: 110px;
        border-radius: 110px;
        background: #f56c6c url('@/assets/images/customer/电话.png') no-repeat center center;
        background-size: 60%;
      }
    }
  }
}

.el-tag {
  height: 100%;
}
</style>
